<template>
  <div class="app-search">
    <!-- 扫码列 -->
    <div class="order">
      <el-button class="scannerButton" type="danger" @click="getInputFocus"
        >请点击后再扫码！</el-button
      >
      <el-form class="form_application" label-width="33%"
        ><el-row
          style="
            width: 100%;
            height: 100%;
            display: flex;
            align-content: center;
            align-items: center;
          "
        >
          <el-col :span="9">
            <div class="propreinfor">
              <el-form-item label="订单号">
                <div class="contant">
                  <el-input
                    ref="inputBatch"
                    v-model="searchForm.batchnum"
                    clearable
                    placeholder="请输入订单号"
                    @blur="handleBlur"
                    style="height: 100%"
                  ></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="propreinfor">
              <el-form-item label="卷号">
                <div class="contant">
                  <el-select
                    v-model="searchForm.reelnum"
                    clearable
                    filterable
                    placeholder="选择卷号"
                    style="height: 100%"
                  >
                    <el-option
                      v-for="item in Object.keys(options)"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="propreinfor">
              <el-form-item label="机器号">
                <div class="contant">
                  <el-select
                    v-model="searchForm.machinecode"
                    clearable
                    filterable
                    placeholder="选择机器号"
                  >
                    <el-option
                      v-for="item in options[searchForm.reelnum]"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 搜索列 -->
    <div class="select">
      <div class="select_all">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
      </div>
      <div class="select_single">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            class="region-list-item"
            v-for="city in cities"
            :label="city"
            :key="city"
            >{{ city }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <!-- <div style="margin: 15px 10px"></div> -->
    </div>
    <div class="bottom-btn">
      <el-button class="searchButton" type="primary" @click="search"
        >搜索</el-button
      >
    </div>
  </div>
</template>

<script>
import * as api from "./api.js";
const cityOptions = [
  "烂胶",
  "气泡",
  "布毛",
  "凹痕",
  "色线",
  "褶皱",
  "停机印",
  "驳口",
  "针板孔",
  "布接头",
];

export default {
  name: "defectSearch",
  // 父传来的搜索数据
  props: ["pageListen"],
  data() {
    return {
      // 搜索数据
      searchForm: {
        // 订单号
        batchnum: "",
        // 卷号
        reelnum: "",
        // 机器码
        machinecode: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 20,
      },
      // 瑕疵数据
      defectData: [],

      nameData: [],
      categoryCounts: [],
      total: 0,
      // 卷号机器号选项
      options: [],

      checkAll: true,
      checkedCities: cityOptions,
      cities: cityOptions,
      isIndeterminate: false,
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 点击扫码
    getInputFocus() {
      this.$refs.inputBatch.focus();
    },

    // 点击搜索按钮
    search() {
      if (this.searchForm.batchnum == null || this.searchForm.batchnum == "") {
        this.$message({
          message: "请先输入订单号",
          type: "warning",
        });
        return;
      }
      this.querydefectDataClick();
    },

    // 查询按钮
    querydefectDataClick() {
      // 将数组转换为逗号分隔的字符串
      var defectTypeTranslate = this.handC2E(this.checkedCities);
      var defectTypeTranslate = defectTypeTranslate.join(",");
      this.defectData = [];
      this.nameData = [];
      this.categoryCounts = [];
      let searchParam = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        batchnum: this.searchForm.batchnum,
        reelnum: this.searchForm.reelnum,
        machinecode: this.searchForm.machinecode,
        limit: this.searchForm.limit,
        page: 1,
        isAll: this.checkAll,
        defectType: defectTypeTranslate,
      };
      api.defectDataFilterGetList(searchParam).then((res) => {
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        res.data.category.forEach((ele) => {
          this.nameData.push(ele.defecparamname);
          this.categoryCounts.push(ele.count);
        });
        this.total = res.data.total;
        if (this.defectData.length == 0) {
          this.$message({
            message: "瑕疵数据为空",
            type: "warning",
          });
        }
        // 向父组件传数据
        // 瑕疵数据
        this.$emit("defectData-event", {
          defectData: this.defectData,
          nameData: this.nameData,
          categoryCounts: this.categoryCounts,
          total: this.total,
          batchnum: this.searchForm.batchnum,
          reelnum: this.searchForm.reelnum,
          machinecode: this.searchForm.machinecode,
          isAll: this.checkAll,
          defectType: defectTypeTranslate,
        });
      });
    },
    // 查询分页
    querydefectDataWithOptions() {
      // 将数组转换为逗号分隔的字符串
      var defectTypeTranslate = this.handC2E(this.checkedCities);
      var defectTypeTranslate = defectTypeTranslate.join(",");
      this.defectData = [];
      this.nameData = [];
      this.categoryCounts = [];
      let searchParam = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        batchnum: this.searchForm.batchnum,
        reelnum: this.searchForm.reelnum,
        page: this.searchForm.page,
        machinecode: this.searchForm.machinecode,
        limit: this.searchForm.limit,
        isAll: this.checkAll,
        defectType: defectTypeTranslate,
      };
      api.defectDataFilterGetList(searchParam).then((res) => {
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        res.data.category.forEach((ele) => {
          this.nameData.push(ele.defecparamname);
          this.categoryCounts.push(ele.count);
        });
        this.total = res.data.total;
        if (this.defectData.length == 0) {
          this.$message({
            message: "瑕疵数据为空",
            type: "warning",
          });
        }
        // 向父组件传数据
        // 瑕疵数据
        this.$emit("defectData-event", {
          defectData: this.defectData,
          nameData: this.nameData,
          categoryCounts: this.categoryCounts,
          total: this.total,
          batchnum: this.searchForm.batchnum,
          reelnum: this.searchForm.reelnum,
          machinecode: this.searchForm.machinecode,
          isAll: this.checkAll,
          defectType: defectTypeTranslate,
        });
      });
    },
    // 获取订单号对应的批号卷号
    queryBybatchnum() {
      // 查询卷号机器号
      api.defectByBatchnum(this.searchForm).then((res) => {
        this.options = res.data;
      });
    },
    // 订单失去焦点查卷号机器号
    handleBlur() {
      if (this.searchForm.batchnum != null && this.searchForm.batchnum != "") {
        this.queryBybatchnum();
        return;
      } else {
      }
    },
    // 中to英
    handC2E(chineseArray) {
      // 中to英
      const c2e = {
        烂胶: "brokenglue",
        气泡: "bubble",
        布毛: "clothwool",
        凹痕: "dent",
        色线: "ribbon",
        褶皱: "wrinkle",
        停机印: "stopimpression",
        驳口: "sewinginterface",
        针板孔: "needleplatehole",
        布接头: "clothinterface",
      };
      var englishArray = chineseArray.map(function (chineseWord) {
        return c2e[chineseWord];
      });
      return englishArray;
    },
  },
  mounted() {
    this.$refs.inputBatch.focus();
  },
  watch: {
    // 监听父组件的页码变化
    pageListen: {
      handler(newValue) {
        this.searchForm.page = newValue.page;
        this.searchForm.limit = newValue.limit;
        this.querydefectDataWithOptions();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.app-search {
  background-color: #ffffff;
  height: 100%;
  display: block;
}
//    <!-- 扫码列 -->
.order {
  width: 50vw;
  height: 5.5vh;
  display: flex;
  padding: 3px;
  align-content: center;
  max-width: 100%; /* 最大宽度 */
  min-width: 100%;
  // max-height: 36px; /* 最大高度 */
  // justify-content:center;
  .scannerButton {
    width: 24%;
    height: 100%;
    font-size: 20px;
    font-weight: 800;
    margin-right: 16px;
  }
  .form_application {
    // margin-top: 7px;
    width: 74%;
    height: 100%;
    .propreinfor {
      width: 100%;
      height: 100%;
      //上边框，左边框
      border-left: 1px solid rgb(192, 196, 204);
      border-top: 1px solid rgb(192, 196, 204);
      margin: 0 auto;
    }

    .contant {
      //右边框，下边框
      padding: 5px;
      border-right: 1px solid rgb(192, 196, 204);
      border-bottom: 1px solid rgb(192, 196, 204);
      height: 100% !important;
    }
    ::v-deep .el-form-item {
      //每一项
      position: relative;
      height: 100%;
      margin-bottom: 0;
      height: auto !important;
    }

    ::v-deep .el-form-item__label {
      //左边的laebel以及颜色，高度，字体等
      position: absolute;
      font-size: 20px;
      height: 100%;
      border-right: 1px solid rgb(192, 196, 204);
      border-bottom: 1px solid rgb(192, 196, 204);
      padding: 6px;
      background: #f9f9f9;
      font-weight: 400;
      color: #000;
      line-height: normal;
      display: flex;
      align-items: center; //垂直居中
      justify-content: center; //左右居中
    }

    ::v-deep.el-form-item__content {
      //右边输入框或者下拉框等
      line-height: 40px;
      height: 100%;
    }
    ::v-deep.el-form-item__error {
      //校验规则的样式，位于输入框下方
      z-index: 999;
      padding-top: 0;
      left: 10px;
      top: calc(100% - 5px);
    }
  }
}
//      <!-- 搜索列 -->
.select {
  margin-top: 6px;
  width: 50vw;
  height: 3vh;
  display: flex;
  background: #e9e7e7;
  padding-left: 8px;
  max-width: 100%; /* 最大宽度 */
  max-height: 38px; /* 最大高度 */
  min-width: 100%;
  ::v-deep .el-checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
    // vertical-align: middle;
  }
  ::v-deep .el-checkbox__label {
    font-size: 0.72vw;
  }
  ::v-deep .el-checkbox__inner {
    width: 0.76vw; /* 设置复选框的宽度 */
    height: 0.76vw; /* 设置复选框的高度 */
  }
  ::v-deep .el-checkbox{
    margin-right: 22px;
  }
  .select_all {
    width: 10%;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }
  .select_single {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    .region-list-item {
      width: 100%;
      white-space: nowrap;
      // overflow: hidden;
    }
  }
}

.bottom-btn {
  margin-top: 6px;
  height: 3vh;
  text-align: right;
  .searchButton {
    width: 24%;
    height: 100%;
    font-size: 14px;
    margin: 0;
    padding: inherit;
    ::v-deep el-button {
      padding: 0;
      margin: 0;
    }
  }
}

::v-deep .el-input__inner:focus {
  border: 3px solid red;
}
::v-deep .el-input__inner {
  height: auto;
  font-size: 15px;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #246177;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #246177;
  border-color: #246177;
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: #246177;
  border-color: #246177;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #246177;
  border-color: #246177;
}

::v-deep .order .form_application[data-v-b09d22da] .el-form-item__label {
  font-size: 0.72vw;
}
</style>
